<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <template #header>
      <el-button
        type="primary"
        size="default"
        icon="ele-Plus"
        @click="emits('changeConditionEvent', Condition.SpuForm)"
        v-has="'btn.Spu.add'"
        >添加SPU</el-button
      >
    </template>
    <!-- card body -->
    <el-table :data="spuList" border stripe>
      <el-table-column type="index" width="80" label="操作" />
      <el-table-column label="SPU名称" prop="spuName"></el-table-column>
      <el-table-column label="SPU描述" prop="description"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="success"
            size="small"
            icon="ele-Plus"
            title="添加sku"
            @click="handleToSkuForm(row)"
            v-has="'btn.Spu.addsku'"
          ></el-button>
          <el-button
            type="warning"
            size="small"
            icon="ele-Edit"
            title="修改spu"
            @click="emits('changeConditionEvent', Condition.SpuForm, row)"
            v-has="'btn.Spu.update'"
          ></el-button>
          <el-button
            type="info"
            size="small"
            icon="ele-InfoFilled"
            title="查看sku列表"
            @click="handleShowDetail(row)"
            v-has="'btn.Spu.skus'"
          ></el-button>
          <el-button
            type="danger"
            size="small"
            icon="ele-Delete"
            title="删除spu"
            @click="handleDeleteSpu(row)"
            v-has="'btn.Spu.delete'"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      v-model:currentPage="page"
      v-model:page-size="limit"
      :page-sizes="pageSizes"
      :pager-count="successivePage"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total"
    />

    <!-- 弹窗 -->
    <el-dialog
      v-model="dialogTableVisible"
      title="Sku列表"
      @close="handleCloseDialog"
    >
      <el-table :data="skuList">
        <el-table-column property="date" label="名称" prop="skuName" />
        <el-table-column property="name" label="价格" prop="price" />
        <el-table-column property="address" label="重量" prop="weight" />
        <el-table-column property="address" label="默认图片">
          <template v-slot="{ row }">
            <img :src="row.skuDefaultImg" width="120" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "SpuList",
});
</script>

<script setup lang="ts">
import { ref, toRefs, watch } from "vue";

import { useCartgoryStore } from "@/stores/cartgory";
import { storeToRefs } from "pinia";

import type {
  recordsType,
  SkuListType,
  SpuInfoType,
} from "@/api/product/interface";
import {
  requestDeleteSpuBySupId,
  requestSkuListById,
  requestSpuList,
} from "@/api/product";

import { Condition } from "../type";

import { ElMessage } from "element-plus";

/* pinia */
const cartgoryStore = useCartgoryStore();
const { category3Id } = storeToRefs(cartgoryStore);

/* 分页数据 */
const paginationData = ref({
  page: 1,
  limit: 3,
  total: 0,
  successivePage: 5,
  pageSizes: [3, 5, 7, 9],
});
const { page, limit, total, successivePage, pageSizes } = toRefs(
  paginationData.value
);
// 监听 page limit 的变化重新加载数据
watch([page, limit], () => {
  getSupList();
});

/* SpuInfoList */
const spuList = ref<recordsType>([]);

// spuInfoList 请求
const getSupList = async () => {
  try {
    const result = await requestSpuList(
      page.value,
      limit.value,
      category3Id.value as number
    );
    spuList.value = result.records;
    total.value = result.total;
  } catch (error) {}
};

// 当三级分类发生改变时，请求品牌属性列表数据(直接监听 attrStore 中 category3Id 的变化)
watch(
  category3Id,
  (newVal) => {
    // 判断没有 category3Id 就不请求数据
    if (!newVal) {
      spuList.value = [];
      total.value = 0;
      return;
    }
    getSupList();
  },
  { immediate: true }
);

/* 获取父组件的数据 */
interface EmitsType {
  (
    e: "changeConditionEvent",
    condition: Condition,
    backfillData?: SpuInfoType
  ): void;
}
const emits = defineEmits<EmitsType>();

//删除某个Spu
const handleDeleteSpu = async (row: SpuInfoType) => {
  try {
    await requestDeleteSpuBySupId(row.id as number);
    //发送请求
    getSupList();
  } catch (e) {
    ElMessage.error("删除数据失败");
  }
};

//点击去往新增sku
const handleToSkuForm = (row: SpuInfoType) => {
  emits("changeConditionEvent", Condition.SkuForm, row);
};

const dialogTableVisible = ref(false);
const skuList = ref<SkuListType>([]);
//查看sku列表
const handleShowDetail = async (row: SpuInfoType) => {
  dialogTableVisible.value = true;

  try {
    const result = await requestSkuListById(row.id as number);
    skuList.value = result;
  } catch (e) {
    ElMessage.error("查看Sku列表失败");
  }
};
const handleCloseDialog = () => {
  skuList.value = [];
};
</script>

<style scoped>
.pagination {
  margin-top: 30px;
}
</style>
